<template>
<!-- 可以参考foodManage.vue的注释基本相同 -->
  <a-modal
    :width="700"
    title="修改"
    :visible="changeOptionVisible"
    :confirm-loading="confirmLoading"
    @ok="submitForm"
    @cancel="handleCancel"
    okText="确认"
    cancelText="取消"
  >
    <a-form-model
      ref="foodRuleForm"
      :model="foodRuleForm"
      :rules="foodrule"
      v-bind="layout"
    >
      <a-form-model-item has-feedback label="类别" prop="classes">
        <a-select
          v-model="foodRuleForm.classes"
          style="width: 120px"
        >
          <a-select-option v-if="foodRuleForm.classes==='规格'||foodRuleForm.classes==='单品'" value="规格"> 规格 </a-select-option>
          <a-select-option v-else value="套餐"> 套餐 </a-select-option>
          <a-select-option v-if="foodRuleForm.classes==='规格'||foodRuleForm.classes==='单品'" value="单品"> 单品 </a-select-option>
        </a-select>
        <a-button
          type="dashed"
          @click="addZu(foodRuleForm.classes)"
          v-if="
            foodRuleForm.classes === '规格' || foodRuleForm.classes === '套餐'
          "
          >增加选项组</a-button
        >
      </a-form-model-item>

      <a-form-model-item
        v-if="foodRuleForm.classes === '规格'"
        has-feedback
        label="选项"
        prop="specifications"
      >
        <div
          v-for="(item, index) in foodRuleForm.specifications"
          :key="index"
          class="specificationsZu"
        >
          <div>
            <span>选项组标题：</span>
            <a-select v-model="item.title" style="width: 120px" @select="guigeChange(item)">
                <a-select-option value="规格"> 规格 </a-select-option>
                <a-select-option value="熟度"> 熟度 </a-select-option>
              </a-select>
            <a-button @click="addXiang(item.option)" type="dashed"
              >增加选项</a-button
            >
          </div>
          <span>默认项：</span>
          <a-radio-group v-model="item.choose" :name="item.title">
            <a-radio
              v-for="(it, imoren) in item.option"
              :value="it.name"
              :key="imoren"
            >
              {{ it.name }}
            </a-radio>
          </a-radio-group>
          <a-divider />
          <div v-for="(i, ixuan) in item.option" :key="ixuan">
            <span class="specifications"
              >选项名称：
              <a-popconfirm
                v-if="ixuan!==0"
                class="deleteXiang"
                title="确定删除这个选项吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteXiangConfirm(item.option, ixuan)"
                ><a href="#"><a-icon class="smallicon" type="close" /></a
              ></a-popconfirm> </span
            ><a-select
                :value="i.name"
                style="width: 30%"
                @change="
                  (value) => {
                    comboSelect(item, value, i);
                  }
                "
              >
                <a-select-option
                  v-for="(dan, index) in item.itemXuan"
                  :key="index"
                  :value="dan"
                >
                  {{ dan }}
                </a-select-option> </a-select
              ><a-divider type="vertical" /><span v-if="item.title !== '熟度'&&ixuan!==0">加价：</span
            ><a-input
              v-if="item.title !== '熟度'&&ixuan!==0"
              placeholder="原价基础加钱"
              class="specificationsInput"
              v-model="i.addprice"
              autocomplete="off"
            />
          </div>
          <a-popconfirm
            class="deleteZu"
            title="确定删除这个选项组吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteZuConfirm(foodRuleForm.classes, index)"
            ><a href="#"><a-icon type="close" /></a
          ></a-popconfirm>
        </div>
      </a-form-model-item>
      <a-form-model-item
        v-if="foodRuleForm.classes === '套餐'"
        has-feedback
        label="选项组"
        prop="combo"
      >
        <div
          v-for="(item, index) in foodRuleForm.combo"
          :key="index"
          class="specificationsZu"
        >
          <div>
            <span>选项组标题：</span>
            <a-select v-model="item.title" style="width: 120px" @select="itemXuanChange(item)">
                <a-select-option
                  v-for="item in data"
                  :key="item.key"
                  :value="item.name"
                >
                  {{ item.name }}</a-select-option
                >
            </a-select>
            <a-button @click="addXiang(item.option)" type="dashed"
              >增加选项</a-button
            >
          </div>
          <span>默认项：</span>
          <a-radio-group v-model="item.choose" :name="item.title">
            <a-radio
              v-for="(it, imoren) in item.option"
              :value="it.name"
              :key="imoren"
            >
              {{ it.name }}
            </a-radio>
          </a-radio-group>
          <a-divider />
          <div v-for="(i, ixuan) in item.option" :key="ixuan">
            <span class="specifications"
              >选项名称：
              <a-popconfirm
                v-if="ixuan!==0"
                class="deleteXiang"
                title="确定删除这个选项吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteXiangConfirm(item.option, ixuan)"
                ><a href="#"><a-icon class="smallicon" type="close" /></a
              ></a-popconfirm> </span
            ><a-select
                :value="i.name"
                style="width: 30%"
                @change="
                  (value) => {
                    comboSelect(item, value, i);
                  }
                "
              >
                <a-select-option
                  v-for="(dan, index) in item.itemXuan"
                  :key="index"
                  :value="dan"
                >
                  {{ dan }}
                </a-select-option> </a-select
              ><a-divider type="vertical" /><span v-if="item.title !== '熟度'&&ixuan!==0">加价：</span
            ><a-input
              v-if="item.title !== '熟度'&&ixuan!==0"
              placeholder="原价基础加钱"
              class="specificationsInput"
              v-model="i.addprice"
              autocomplete="off"
            />
          </div>
          <a-popconfirm
            class="deleteZu"
            title="确定删除这个选项组吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteZuConfirm(foodRuleForm.classes, index)"
            ><a href="#"><a-icon type="close" /></a
          ></a-popconfirm>
        </div>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  props:["data","comboMap"],
  data() {
    
    let validatespecifications = (rule, value, callback) => {
      if (this.foodRuleForm.classes !== "规格") {
        callback();
      } else {
        
        console.log(value)
        let fmap = new Map()
        value.map((item) => {
          let chooseOrNO=false
          if (item.title === "" || item.choose === "") {
            callback(new Error("不应有选项组标题为空或未选默认项"));
          }
          if (fmap.has(item.title)) {
            callback(new Error("不同选项组标题不可相同"));
          } else {
            fmap.set(item.title, "");
          }
          let map = new Map()
          item.option.map((i) => {
            if (i.name === "" || i.addprice === "") {
              callback(new Error("不应有选项或加价为空"));
            }
            if (!/^\d+$/.test(i.addprice)) {
              callback(new Error("加价必须为正纯数字"));
            }
            if (map.has(i.name)) {
              callback(new Error("同一个选项组不应有相同选项"));
            } else {
              map.set(i.name, "");
            }
            if(i.name===item.choose){
              chooseOrNO=true
            }
          })
          if(chooseOrNO===false){
          callback(new Error("请选择默认项"));
        }
        });
        callback();
        
      }
    }
    let validatecombo = (rule, value, callback) => {
      if (this.foodRuleForm.classes !== "套餐") {
        callback();
      } else {
        console.log(value);
        let fmap = new Map();
        value.map((item) => {
          if (item.title === "" || item.choose === "") {
            callback(new Error("不应有选项组标题为空或未选默认项"));
          }
          if (fmap.has(item.title)) {
            callback(new Error("不同选项组标题不可相同"));
          } else {
            fmap.set(item.title, "");
          }
          let map = new Map();
          item.option.map((i) => {
            if (i.name === "" || i.addprice === "") {
              callback(new Error("不应有选项或加价为空"));
            }
            if (!/^\d+$/.test(i.addprice)) {
              callback(new Error("加价必须为正纯数字"));
            }
            // if(map.has(i.name)){
            //    callback(new Error("同一个选项组不应有相同选项"));
            // }else{
            //   map.set(i.name,"")
            // }
          });
        });
        callback();
      }
    };
    return {
      record: [],
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      foodRuleForm: {
        classes: "规格",
        specifications: [
          {
            title: "规格",
            choose: "中份",
            itemXuan:["大份", "中份", "小份"],
            option: [
              {
                name: "小份",
                addprice: 0,
              },
              {
                name: "中份",
                addprice: 1,
              },
              {
                name: "小份",
                addprice: 2,
              },
            ],
          },
          {
            title: "熟度",
            choose: "全熟",
            //这里itemXuan也可以不要，跟套餐一样选标题时触发，否则就要
            itemXuan:["全熟", "七分熟", "五分熟"],
            option: [
              {
                name: "全熟",
                addprice: 0,
              },
              {
                name: "七成熟",
                addprice: 0,
              },
            ],
          },
        ],
        combo: [
          {
            title: "",
            choose: "",
            itemXuan:[],
            option: [
              {
                name: "",
                addprice: 0,
              },
              {
                name: "",
                addprice: 10,
              },
            ],
          },
          {
            title: "",
            choose: "",
            itemXuan:[],
            option: [
              {
                name: "",
                addprice: 0,
              },
              {
                name: "",
                addprice: 4,
              },
            ],
          },
        ],
      },
      foodrule: {
        specifications: [{required: true, validator: validatespecifications, trigger: "blur" }],
        combo: [{required: true, validator: validatecombo, trigger: "blur" }],
      },
      confirmLoading: false,
      changeOptionVisible: false,
    };
  },
  methods: {
    guigeChange(item){
      console.log(item)
      if(item.title==="规格"){
        item.itemXuan=["大份","中份","小份"]
      }else{
        item.itemXuan=["全熟","七分熟","五分熟"]
      }
    },
    itemXuanChange(item){

      item.itemXuan=this.comboMap.get(item.title)
      item.option.map(i=>{
        i.name=""
      })
    },
    show(record) {
      const specifications=[
          {
            title: "规格",
            choose: "中份",
            itemXuan:["大份","中份","小份"],
            option: [
              {
                name: "小份",
                addprice: 2,
              },
              {
                name: "中份",
                addprice: 1,
              },
              {
                name: "大份",
                addprice: 2,
              },
            ],
          },
          {
            title: "熟度",
            choose: "全熟",
            itemXuan:["全熟","七分熟","五分熟"],
            option: [
              {
                name: "全熟",
                addprice: 0,
              },
              {
                name: "七分熟",
                addprice: 0,
              },
            ],
          },
        ]
    const combo=[
          {
            title: "",
            choose: "",
            option: [
              {
                name: "",
                addprice: 0,
              },
              {
                name: "",
                addprice: 10,
              },
            ],
          },
          {
            title: "",
            choose: "",
            option: [
              {
                name: "",
                addprice: 0,
              },
              {
                name: "",
                addprice: 4,
              },
            ],
          },
        ]
      console.log(record);
      this.foodRuleForm.combo=combo
      this.foodRuleForm.specifications=specifications
      this.record = record;
      // 不能完全赋值，因为有可能它的套餐或规格初始项是空的
      this.foodRuleForm.classes = record.classes;
      console.log(this.foodRuleForm.classes)
      switch (record.classes) {
        case "套餐":
          if(record.combo)
            this.foodRuleForm.combo = record.combo;
          break;
        case "规格":
          if(record.specifications)
            this.foodRuleForm.specifications = record.specifications;
          break;
      }
      this.changeOptionVisible = true;
    },
    submitForm() {
      this.$refs.foodRuleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          setTimeout(() => {
            this.confirmLoading = false;
            //浅复制，所以要再赋值
            this.record.classes = this.foodRuleForm.classes;
            switch (this.record.classes) {
              case "套餐":
                this.record.combo = this.foodRuleForm.combo;
                break;
              case "规格":
                this.record.specifications = this.foodRuleForm.specifications;
                break;
            }
            this.$message.success("默认选项功能暂不可用，敬请期待");
            this.$message.success("成功修改");
            this.changeOptionVisible = false;
            this.$refs.foodRuleForm.resetFields();
          }, 500);
        } else {
          console.log("添加失败");
          return false;
        }
      });
    },
    handleCancel() {
      this.changeOptionVisible = false;
    },
    deleteZuConfirm(name, index) {
      if (name == "套餐") name = "combo";
      else name = "specifications";
      if (this.foodRuleForm[name].length === 1) {
        this.$message.warn("至少要有一个选项组");
      } else {
        this.foodRuleForm[name].splice(index, 1);
        this.$message.success("成功删除");
      }
    },
    deleteXiangConfirm(option, index) {
      if (option.length === 2) {
        this.$message.warn("至少要有2个选项");
      } else {
        option.splice(index, 1);
        this.$message.success("成功删除");
      }
    },
    addZu(name) {
      if (name == "套餐") name = "combo";
      else name = "specifications";
      this.foodRuleForm[name].push({
        title: "",
        choose: "",
        itemXuan:[],
        option: [
          {
            name: "",
            addprice: 0,
          },
          {
            name: "",
            addprice: 0,
          },
        ],
      });
      this.$message.success("成功添加,请向下划");
    },
    addXiang(option) {
      option.push({
        name: "",
        addprice: 0,
      });
      this.$message.success("成功添加,请向下划");
    },
    comboSelect(item, value, i) {
      let flag = item.option.some((item) => {
        if (item.name === value) {
          return true;
        } else {
          return false;
        }
      });
      console.log(flag);
      if (flag) {
        this.$message.warn("该选项组已经有该选项");
      } else {
        item.choose = value;
        i.name = value;
      }
    },
  },
};
</script>

<style scoped>
.specificationsInput {
  width: 30%;
}
.specificationsZu {
  background-color: rgb(245, 245, 245);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 5px;
  width: 130%;
  position: relative;
}
.deleteZu {
  position: absolute;
  top: 1px;
  right: 10px;
}

.specifications {
  position: relative;
}
.deleteXiang {
  position: absolute;
  top: -20px;
  left: -9px;
}
.smallicon {
  font-size: 10px;
}
.comboSelect {
  width: 20%;
}
</style>
